<template>
<div class="product-add mt30">
    <!--form表单-->
    <el-form size="small" ref="form" :model="form" label-width="200px">
      <el-form-item :label="$t('plus.select_lang')">
        <el-select v-model="lang">
          <el-option value="zh" label="簡體中文"></el-option>
          <el-option value="hk" label="繁體中文"></el-option>
          <el-option value="en" label="English"></el-option>
        </el-select>
      </el-form-item>
      <div class="common-form">{{$t('plus.distribution_page')}}</div>
      <el-form-item :label="$t('plus.page_title')">
        <el-input
          v-model="form.index[getKey`title`]"
          :placeholder="$t('plus.distribution_center')"
          class="max-w460"
        ></el-input>
        <div class="tips">{{$t('plus.default_distribution_center')}}</div>
      </el-form-item>
      <el-form-item :label="$t('plus.non_distributor_tip')">
        <el-input
          v-model="form.index[getKey`notAgent`]"
          :placeholder="$t('plus.not_distributor_msg')"
          class="max-w460"
        ></el-input>
      </el-form-item>
      <el-form-item :label="$t('plus.apply_distributor')"
        ><el-input
          v-model="form.index[getKey`applyNow`]"
          :placeholder="$t('plus.join_now')"
          class="max-w460"
        ></el-input
      ></el-form-item>
      <el-form-item :label="$t('plus.referrer1')"
        ><el-input
          v-model="form.index[getKey`referee`]"
          :placeholder="$t('plus.referrer1')"
          class="max-w460"
        ></el-input
      ></el-form-item>
      <el-form-item :label="$t('plus.withdrawable_commission1')"
        ><el-input
          v-model="form.index[getKey`money`]"
          :placeholder="$t('plus.withdrawable')"
          class="max-w460"
        ></el-input
      ></el-form-item>
      <el-form-item :label="$t('plus.pending_commission')"
        ><el-input
          v-model="form.index[getKey`freezeMoney`]"
          :placeholder="$t('plus.pending_withdrawal')"
          class="max-w460"
        ></el-input
      ></el-form-item>
      <el-form-item :label="$t('plus.withdrawn_amount')"
        ><el-input
          v-model="form.index[getKey`totalMoney`]"
          :placeholder="$t('plus.withdrawn_amount')"
          class="max-w460"
        ></el-input
      ></el-form-item>
      <el-form-item :label="$t('plus.go_withdraw')"
        ><el-input
          v-model="form.index[getKey`cash`]"
          :placeholder="$t('plus.go_withdraw')"
          class="max-w460"
        ></el-input
      ></el-form-item>

      <div class="common-form">{{$t('plus.apply_distributor_page_title')}}</div>
      <el-form-item :label="$t('plus.page_title')">
        <el-input
          v-model="form.apply[getKey`title`]"
          :placeholder="$t('plus.apply_distributor')"
          class="max-w460"
        ></el-input>
        <div class="tips">{{$t('plus.default_apply_distributor')}}</div>
      </el-form-item>
      <el-form-item :label="$t('plus.fill_application_info')"
        ><el-input
          v-model="form.apply[getKey`wordTitle`]"
          :placeholder="$t('plus.fill_application_info')"
          class="max-w460"
        ></el-input
      ></el-form-item>
      <el-form-item :label="$t('plus.application_agreement')"
        ><el-input
          v-model="form.apply[getKey`license`]"
          :placeholder="$t('plus.application_agreement')"
          class="max-w460"
        ></el-input
      ></el-form-item>
      <el-form-item :label="$t('plus.apply_reseller')"
        ><el-input
          v-model="form.apply[getKey`submit`]"
          :placeholder="$t('plus.apply_reseller')"
          class="max-w460"
        ></el-input
      ></el-form-item>
      <el-form-item :label="$t('plus.under_review_tip')">
        <el-input
          v-model="form.apply[getKey`waitAudit`]"
          :placeholder="$t('plus.under_review_msg')"
          class="max-w460"
        ></el-input>
      </el-form-item>
      <el-form-item :label="$t('plus.go_to_mall')"
        ><el-input
          v-model="form.apply[getKey`gotoMall`]"
          :placeholder="$t('plus.go_to_mall')"
          class="max-w460"
        ></el-input
      ></el-form-item>

      <div class="common-form">{{$t('plus.order_page')}}</div>
      <el-form-item :label="$t('plus.page_title')">
        <el-input
          v-model="form.order[getKey`title`]"
          :placeholder="$t('plus.distribution_order')"
          class="max-w460"
        ></el-input>
        <div class="tips">{{$t('plus.default_order_page')}}</div>
      </el-form-item>
      <el-form-item :label="$t('plus.all')"
        ><el-input
          v-model="form.order[getKey`all`]"
          :placeholder="$t('plus.all')"
          class="max-w460"
        ></el-input
      ></el-form-item>
      <el-form-item :label="$t('plus.commission_unsettled')"
        ><el-input
          v-model="form.order[getKey`unsettled`]"
          :placeholder="$t('plus.commission_unsettled')"
          class="max-w460"
        ></el-input
      ></el-form-item>
      <el-form-item :label="$t('plus.commission_settled')"
        ><el-input
          v-model="form.order[getKey`settled`]"
          :placeholder="$t('plus.commission_settled')"
          class="max-w460"
        ></el-input
      ></el-form-item>

      <div class="common-form">{{$t('plus.team_page')}}</div>
      <el-form-item :label="$t('plus.page_title')">
        <el-input
          v-model="form.team[getKey`title`]"
          :placeholder="$t('plus.my_team')"
          class="max-w460"
        ></el-input>
        <div class="tips">{{$t('plus.default_team_page')}}</div>
      </el-form-item>

      <el-form-item :label="$t('plus.team_total')"
        ><el-input
          v-model="form.team[getKey`totalTeam`]"
          :placeholder="$t('plus.team_total')"
          class="max-w460"
        ></el-input
      ></el-form-item>
      <el-form-item :label="$t('plus.team_level1')"
        ><el-input
          v-model="form.team[getKey`first`]"
          :placeholder="$t('plus.team_level1')"
          class="max-w460"
        ></el-input
      ></el-form-item>
      <el-form-item :label="$t('plus.team_level2')"
        ><el-input
          v-model="form.team[getKey`second`]"
          :placeholder="$t('plus.team_level2')"
          class="max-w460"
        ></el-input
      ></el-form-item>
      <el-form-item :label="$t('plus.team_level3')"
        ><el-input
          v-model="form.team[getKey`third`]"
          :placeholder="$t('plus.team_level3')"
          class="max-w460"
        ></el-input
      ></el-form-item>

      <div class="common-form">{{$t('plus.withdraw_detail_page')}}</div>
      <el-form-item :label="$t('plus.page_title')">
        <el-input
          v-model="form.cashList[getKey`title`]"
          :placeholder="$t('plus.withdraw_details')"
          class="max-w460"
        ></el-input>
        <div class="tips">{{$t('plus.default_withdraw_detail')}}</div>
      </el-form-item>
      <el-form-item :label="$t('plus.all')"
        ><el-input
          v-model="form.cashList[getKey`all`]"
          :placeholder="$t('plus.all')"
          class="max-w460"
        ></el-input
      ></el-form-item>
      <el-form-item :label="$t('plus.under_review')"
        ><el-input
          v-model="form.cashList[getKey`apply10`]"
          :placeholder="$t('plus.under_review')"
          class="max-w460"
        ></el-input
      ></el-form-item>
      <el-form-item :label="$t('plus.review_approved')"
        ><el-input
          v-model="form.cashList[getKey`apply20`]"
          :placeholder="$t('plus.review_approved')"
          class="max-w460"
        ></el-input
      ></el-form-item>
      <el-form-item :label="$t('plus.paid')"
        ><el-input
          v-model="form.cashList[getKey`apply40`]"
          :placeholder="$t('plus.paid')"
          class="max-w460"
        ></el-input
      ></el-form-item>
      <el-form-item :label="$t('plus.rejected')"
        ><el-input
          v-model="form.cashList[getKey`apply30`]"
          :placeholder="$t('plus.rejected')"
          class="max-w460"
        ></el-input
      ></el-form-item>

      <div class="common-form">{{$t('plus.apply_withdraw_page')}}</div>
      <el-form-item :label="$t('plus.page_title')">
        <el-input
          v-model="form.cashApply[getKey`title`]"
          :placeholder="$t('plus.apply_withdraw')"
          class="max-w460"
        ></el-input>
        <div class="tips">{{$t('plus.default_apply_withdraw')}}</div>
      </el-form-item>
      <el-form-item :label="$t('plus.withdrawable_commission1')"
        ><el-input
          v-model="form.cashApply[getKey`capital`]"
          :placeholder="$t('plus.withdrawable_commission1')"
          class="max-w460"
        ></el-input
      ></el-form-item>
      <el-form-item :label="$t('plus.withdraw_amount')"
        ><el-input
          v-model="form.cashApply[getKey`money`]"
          :placeholder="$t('plus.withdraw_amount')"
          class="max-w460"
        ></el-input
      ></el-form-item>
      <el-form-item :label="$t('plus.input_withdraw_amount')">
        <el-input
          v-model="form.cashApply[getKey`moneyPlaceholder`]"
          :placeholder="$t('plus.input_withdraw_amount')"
          class="max-w460"
        ></el-input>
      </el-form-item>
      <el-form-item :label="$t('plus.min_withdraw_commission')"
        ><el-input
          v-model="form.cashApply[getKey`minMoney`]"
          :placeholder="$t('plus.min_withdraw_commission')"
          class="max-w460"
        ></el-input
      ></el-form-item>
      <el-form-item :label="$t('plus.submit_application')"
        ><el-input
          v-model="form.cashApply[getKey`submit`]"
          :placeholder="$t('plus.submit_application')"
          class="max-w460"
        ></el-input
      ></el-form-item>

      <div class="common-form">{{$t('plus.promote_qrcode')}}</div>
      <el-form-item :label="$t('plus.page_title')">
        <el-input
          v-model="form.qrcode[getKey`title`]"
          :placeholder="$t('plus.promote_qrcode')"
          class="max-w460"
        ></el-input>
        <div class="tips">{{$t('plus.default_qrcode')}}</div>
      </el-form-item>

      <!--提交-->
      <div class="common-button-wrapper">
        <el-button
          size="small"
          type="primary"
          @click="onSubmit"
          :loading="loading"
          >{{$t('plus.submit')}}</el-button
        >
      </div>
    </el-form>
  </div>
</template>

<script>
import PlusApi from "@/api/plus.js";
export default {
  data() {
    return {
      lang:'hk',
      /*form表单数据*/
      form: {},
      /*是否正在加载*/
      loading: false
    };
  },
  props: {
    settingData: Object
  },
  created() {
    this.form = this.settingData.words
  },
  methods: {
    getKey(key){
      if(this.lang=='zh') return key
      if(this.lang=='hk') return key+'Hk'
      if(this.lang=='en') return key+'En'
    },
    /*提交表单*/
    onSubmit() {
      let self = this;
      let params = self.form;
      self.loading = true;
      PlusApi.words(params, true).then(data => {
        self.loading = false;
        ElMessage({
          message: $t("plus.setting_success"),
          type: "success"
        });
      }).catch(error => {
        self.loading = false;
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.tips {
  color: #ccc;
}
</style>

